<template>
    <div class="content">
        <a-spin :spinning="loading">
            <div v-for="x of list" class="item">
                <div class="time">{{ x.time }}</div>
                <div class="dialog">
                    <div class="label">问题：</div>
                    <div>{{ x.q }}</div>
                </div>
                <div class="dialog">
                    <div class="label">回答：</div>
                    <div class="answerBox">
                        {{ x.a }}
                    </div>
                </div>
            </div>
        </a-spin>
    </div>
</template>

<script>
import dayjs from "dayjs";
import { history } from '../service.js';

export default {
    name: "FAQhistory",
    data() {
        return {
            loading: true,
            list: [],
        };
    },
    async mounted() {
        this.loading = true
        const xs = await history({
            pageNum: 1,
            pageSize: 500,
        });
        this.loading = false;
        this.list = xs.data.map(x => {
            return {
                q: x.question,
                a: x.answer,
                time: dayjs(x.queryTime).format('YYYY-MM-DD hh:mm:ss')
            }
        })
    }
}
</script>

<style scoped lang="less">
.content {
  width: 100%;
  height: 100%;
  overflow: auto;
}

.item {
  background: #fafafa;
  border-radius: 5px;
  padding: 12px;

  & + & {
    margin-top: 12px;
  }
}

.time {
  color: #999;
  font-size: 12px;
  margin-bottom: 8px;
}

.dialog {
  display: flex;

  & + & {
    margin-top: 4px;
  }
}

.label {
  color: #666;

}

.answerBox {
  white-space: pre-wrap;
}
</style>